<template>
	<view class="bookfilter">
		<view class="title">
			——— <text>{{this.title}}</text> ———
		</view>
		<view class="book" v-for="(item,index) in book" @click="goDetail(item.sourceUuid)">
			<view class="img-box">
				<image :src="item.cover" mode="widthFix"></image>
			</view>
			<view class="content">
				<view class="book-title">
					{{index + 1}}.{{item.title}}
				</view>
				<view class="author">
					{{item.author}}
				</view>
				<view class="label">
					<view class="label-list" v-if="item.category != null">
						{{item.category}}
					</view>
					<view class="label-list" v-if="item.extra">
						{{item.extra}}
					</view>
				</view>
				<view class="text">
					<text v-html="item.content"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'bookfilter',
		data() {
			return {
				cateId: '',
				title:'',
				book: [],
			};
		},
		methods: {
			getBook() {
				uni.request({
					url: `https://apis.netstart.cn/yunyuedu/source/v2/searchBook.json?catId=${this.cateId}`,
					method: 'GET'
				}).then(res => {
					// console.log('res ==> ', res);
					this.book = res.data.list
					console.log('this.book ==> ', this.book);
					uni.hideLoading()
				}).catch(err => {
					console.log('err ==> ', err);
				})
			},
			goDetail(id) {
				// id = id.replace('/source/', '');
				let user = uni.getStorageSync('userInfo');
				if (!user) {
					uni.showToast({
						title: '未登录,请先去登录',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: '../detail/detail?id=' + id
					})
				}
			},
		},
		onLoad(option) {
			this.cateId = option.cateId;
			this.title = option.name;
			uni.showLoading({
				title: '正在加载中'
			});
			this.getBook();
		}
	}
</script>

<style lang="scss">
	.bookfilter {
		background-color: #FCECCC;
	}

	.title {
		padding: 50rpx;
		width: 500rpx;
		margin: 0rpx auto;
		text-align: center;
		color: rgba(166, 166, 166, 1);

		text {
			color: #000;
			padding: 0 30rpx;
			font-size: 17px;
		}
	}
	.book {
		width: 675rpx;
		height: 280rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		display: flex;
	
		.img-box {
			width: 200rpx;
			height: 280rpx;
			border: 1px solid #FC768A;
			border-radius: 20rpx;
	
			image {
				width: 100%;
				display: block;
				border-radius: 20rpx;
			}
		}
	
		.content {
			margin-left: 30rpx;
	
			.book-title {
				width: 400rpx;
				font-size: 36rpx;
				font-weight: 700;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
	
			.author {
				font-size: 28rpx;
				color: #a8a8a8;
				margin-top: 20rpx;
			}
	
			.label {
				display: flex;
				margin-top: 20rpx;
	
				.label-list:nth-child(1) {
					margin-left: 0;
				}
	
				.label-list {
					font-size: 24rpx;
					color: #77828a;
					// width: 72rpx;
					padding-left: 10rpx;
					padding-right: 10rpx;
					height: 40rpx;
					background-color: #fce2b2;
					border: 1px solid #FC768A;
					border-radius: 10rpx;
					text-align: center;
					line-height: 40rpx;
					margin-left: 20rpx;
				}
			}
	
			.text {
				font-size: 30rpx;
				color: #77828a;
				width: 411rpx;
				height: 80rpx;
				margin-top: 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}
</style>